<template>
	<view>
		<view class="formModel">
			<view v-if="redact==false" class="cu-form-group">
				<view class="title">用户头像</view>
				<view class="cu-avatar radius bg-gray">
					<image style="height: 100%;width: 100%;" :src="userInfo.user_idcardphoto"></image>
				</view>
			</view>
			<view v-if="redact==false" class="cu-form-group">
				<view class="title">账号</view>
				<text>{{userInfo.user_account}}</text>
			</view>
			<view v-if="redact==false" class="cu-form-group">
				<view class="title">手机号码</view>
				<text>{{userInfo.user_phonenumber}}</text>
			</view>
			<view class="cu-form-group">
				<view class="title">姓名</view>
				<text v-if="redact==false">{{userInfo.user_name}}</text>
				<input focus="true" type="text" maxlength="10" v-else="redact==true" v-model="name" :placeholder="userInfo.user_name"
				 name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">性别</view>
				<text v-if="redact==false">{{userInfo.user_sex}}</text>
				<picker v-else="redact==true" @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:userInfo.user_sex}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">生日</view>
				<text v-if="redact==false">{{userInfo.user_birthday}}</text>
				<picker v-else="redact==true" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="picker">{{date}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">qq</view>
				<text v-if="redact==false">{{userInfo.user_QQ}}</text>
				<input v-else="redact==true" maxlength="11" v-model="qq" :placeholder="userInfo.user_QQ" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">微信</view>
				<text v-if="redact==false">{{userInfo.user_wechat}}</text>
				<input v-else="redact==true" maxlength="18" v-model="weixin" :placeholder="userInfo.user_wechat" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">邮箱</view>
				<text v-if="redact==false">{{userInfo.user_email}}</text>
				<input v-else="redact==true" maxlength="20" v-model="email" :placeholder="userInfo.user_email" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<text v-if="redact==false">{{userInfo.user_address}}</text>
				<input v-else="redact==true" v-model="address" :placeholder="userInfo.user_address" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">身份证号码</view>
				<text v-if="redact==false">{{userInfo.user_id_card}}</text>
				<input v-else="redact==true" maxlength="18" v-model="IDcar" :placeholder="userInfo.user_id_card" name="input"></input>
			</view>
			<view class="imageUp" v-if="redact==true">
				<view class="cu-bar bg-white" style="justify-content: space-between;margin-top:5rpx">
					<view class="action">
						身份证图片上传
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]"  mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="redact==true" class="submit"><button @click="but" class="">保存</button></view>
	</view>
</template>
<script>
	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
				time: '', //ui库
				index: -1,
				picker: ['男', '女'],
				imgList: '',
				userNum: "",
				phone: "",
				name: '',
				sex: "",
				birthday: '',
				qq: '',
				weixin: '',
				email: '',
				address: '',
				IDcar: '',
				IDimg: 'img',
				redact: false, //进入编辑状态
				judge: "编辑",
				userInfo: {},
				imgList: "", //身份证图片,
				upData: ""
			};
		},
		onNavigationBarButtonTap(e) {
			setTimeout(() => {
				this.toRedact(this.judge)
			}, 80)
		},
		onReady() {},
		onLoad() {
			this.getUserInfo();
		},
		methods: {

			//点击按钮
			but() {
				uni.showModal({
					title: '提示',
					content: "确定要保存所做的更改吗？",
					success: (data) => {
						if (data.confirm) {
							uni.showLoading();
							this.upImage();
							this.setUserInfo();
						}
					}
				})
			},
			//修改用户信息
			async setUserInfo() {
				let res = await this.$http({
					url: "/app/user/changeMessage",
					method: "POST",
					data: {
						username: this.name || this.userInfo.user_name,
						user_wechat: this.weixin || this.userInfo.user_wechat,
						user_idCard: this.IDcar || this.userInfo.user_id_card,
						user_address: this.address || this.userInfo.user_address,
						user_QQ: this.qq || this.userInfo.user_QQ,
						email: this.email || this.userInfo.user_email,
						birthday: this.upData || this.userInfo.user_birthday,
						gender: this.sex || this.userInfo.user_sex,
						user_idCardPhoto: this.IDimg || this.IDimg,
					}
				})
				if (res.data.code == 200) {
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: "修改成功"
						})
					}, 500)
				} else {
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: res.data.message
						})
					}, 500)
				}
			},
			//获取用户信息
			async getUserInfo() {
				let res = await this.$http({
					url: "/app/user/searchMessage"
				})
				console.log(res)
				this.userInfo = res.data.data;
			},
			//获取用户信息
			//  getUserInfo(){
			// 	uni.request({
			// 		url:this.confige.webUrl+"/app/user/searchMessage",
			// 		header:{
			// 			'Content-Type':'application/x-www-form-urlencoded','token':this.User.token
			// 		}
			// 	}).then((res)=>{
			// 		console.log(res)
			// 	})
			// },
			bindDateChange: function(e) {
				console.log(e)
				if (e) {
					this.upData = e.detail.value;
				}
				this.date = e.detail.value
			},
			PickerChange(e) {
				this.index = e.detail.value;
				this.sex = this.picker[this.index];
				// console.log(this.sex)
			},
			//进入编辑状态
			toRedact(e) {
				var webView = this.$mp.page.$getAppWebview();
				if (e === "编辑") {
					webView.setTitleNViewButtonStyle(0, {
						text: '取消'
					});
					this.redact = true;
					this.judge = "取消"
				} else if (e === "取消") {
					uni.showModal({
						title: "提示",
						content: "你确定要取消这次更改吗？",
						success: (res) => {
							if (res.confirm) {
								webView.setTitleNViewButtonStyle(0, {
									text: '编辑'
								});
								this.redact = false;
								this.judge = "编辑";
							} else if (res.cancel) {
								this.redact = true;
							}
						}
					})

				}

			},
			//验证手机号
			isPhone() {
				let regex = {
					mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.phone);
			},
			isStandbyPhone() {
				let regex = {
					mobile: /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/
				};
				return regex.mobile.test(this.standbyPhone);
			},
			//选择图片 
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						console.log(this.imgList)
					}
				});
			},
			//图片上传
			upImage() {
				uni.uploadFile({
					url: this.confige.webUrl + "/app/uploadIDCode",
					filePath: this.imgList[0],
					name: 'file',
					formData: {}
				}).then((data) => {
					var [error, res] = data;
					console.log(res.data)
					let jsp = JSON.parse(res.data);
					this.IDimg = jsp.data.msg1
					// console.log(this.IDimg)
					
				})
			},
			//预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//取消上传
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该照片的上传吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							console.log(this.imgList)
						}
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	@import "../../../common/colorui/main.css";
	@import "../../../common/colorui/icon.css";
	@import "../../../common/global.less";

	page {}

	.submit {
		width: 700rpx;
		height: 150rpx;
		margin-left: 25rpx;
		margin-top: 40rpx;

		>button {
			background: #34AB68;
			color: white;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 32rpx;
		}
	}

	.placeholderClass {
		color: #eaeaea;
	}

	.mapText {
		font-size: 28upx;
	}

	.RadioStyle {
		radio {
			margin-right: 10rpx;
			font-size: 30rpx;
		}
	}

	.bottomModel {
		margin-top: 50rpx;
		// .butStyle{font-size: 30rpx; border-radius: 90rpx;width: 600rpx; height:80rpx;line-height: 80rpx;color:#FFFFFF; background-color:@maincolor;}
	}

	.formModel {
		background-color: @backcolorthree;
		border-bottom: 2rpx solid #eaeaea;

		.cu-form-group {
			.title {
				min-width: calc(4em + 15px);
			}
		}
	}
</style>
